<template>
	<div>
		<div>
		  <input type="" name="" placeholder="请输入提示内容" v-model="contents" ></input>
		  <div>输入的提示内容是:{{contents}}</div>
		</div>
		<div>
		  <input type="" name="" maxlength="2" placeholder="请输入确认按钮" v-model="confirmText" ></input>
		  <div>输入的确认按钮内容是:{{confirmText}}</div>
		</div>
		 <com-alert v-if='isShowAlert' :alert='alert'   v-on:cancelModal=
     'cancelModal' v-on:confirmModal=
     'confirmModal'></com-alert> 
		<div class="showAlert" @click="showAler">弹个Alert吧</div>
	</div>
</template>
<script type="text/javascript">
import Alert from '@/components/alert'
 export default{
    data:function () {
    	return{
    		contents:'',
    		confirmText:'',
        isShowAlert:false,
    		alert:{
    			
    		}
    	}
    },
     methods:{
       
        
         cancelModal:function(){
           this.isShowAlert=false;
         },
         confirmModal:function(){
            this.isShowAlert=false;
         },
         showAler:function(){
          var json={
              content:this.contents,
              confirmText:this.confirmText
          }
            this.alert=json;
            this.isShowAlert=true;
            
         }


     },
      components:{
            comAlert:Alert
        }

 }	
</script>
<style>
div{
  font-size:0.24rem;
}
  input{
  	border:1px solid gray;
  	line-height:40px;
  	width:80%;
  	margin:10px auto;
  	padding :2px 10px;
  }
 .showAlert{
 	
	width: 60%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	margin: 50px auto;
	border: 1px solid #108ee9;
	border-radius: 4px;
	background: #108EE9;
	color: #fff;
	font-size: 24px;
}

</style>